<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<style type="text/css">
    body {
        background-color: #000;
        margin: 0;
        padding: 0;
    }
    
    .shadow-box {
        width: 598px;
        height: 398px;
        border: 1px #999 solid;
        margin: 50px auto;
        background-color: #666;
        position: relative;
        overflow: hidden;
        cursor: none;
    }
    
    .shadow-box:after {
        content: '';
        background-color: #999;
        position: absolute;
        width: 100%;
        height: 182px;
        left: 0;
        top: 216px;
    }
    
    .shadow-box .text {
        margin: 0;
        color: #999;
        font-size: 80px;
        font-family: Arial;
        font-weight: bold;
        line-height: 80px;
        text-align: center;
        position: absolute;
        width: 100%;
        left: 0;
        top: 149px;
        text-shadow: 0px -20px 2px #000;
    }
    
    .shadow-box .light {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: url(http://www.itit123.cn/image/231717psmfavvh07wm3wmw.png) center center;
    }
</style>

<body>
    <div class="shadow-box">
        <p class="text">ITDragon博客</p>
        <div class="light"></div>
    </div>

    <script type="text/javascript">
        $('.shadow-box').on('mousemove', function(event) {
            var x = event.offsetX - 600 / 2 + 20,
                y = event.offsetY - 400 / 2 - 20;
            $('.text').css({
                'text-shadow': -x + 'px ' + -y + 'px 2px #000'
            });

            var _x = event.offsetX + 1200 / 2,
                _y = event.offsetY + 900 / 2;
            $('.light').css({
                'background-position': _x + 'px ' + _y + 'px'
            });
        });
    </script>
</body>

</html>